<template>
    <div class="container" :style="'height: '+docheight+'px'">
      <leftcont></leftcont>
      <div class="righCont">
        <topcont></topcont>
        <div class="content">
          <div class="payTable">
            <div class="trendTop">站长提现列表({{ total }})</div>
            <div class="tableCont">
              <div class="tableSerchCont">
                <div class="serchItem">
                  <el-select v-model="redCarStatusVal" placeholder="请选择提现状态">
                    <el-option
                      v-for="item in redCarStatusArr"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
                <div class="serchItem">
                  <el-input v-model="withdrawal_number" placeholder="请输入提现单号"></el-input>
                </div>
                <div class="headBtn">
                  <btn @click="serchFn" value="搜索"></btn>
                </div>
              </div>
              <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                  prop="withdrawal_number"
                  show-overflow-tooltip
                  label="提现单号"
                >
                </el-table-column>
                <el-table-column
                  prop="nick_name"
                  show-overflow-tooltip
                  label="站长昵称"
                >
                </el-table-column>
                
                <el-table-column
                show-overflow-tooltip
                prop="money"
                  label="提现金额">
                </el-table-column>
                <el-table-column
                  label="提现状态">
                  <template slot-scope="scope">
                    <div class="ctrolBtn flexStart">
                        <el-tooltip class="item" effect="dark" :content="scope.row.remark" placement="top-start">
                            <span class="blueBtn" v-if="scope.row.status==1">待提现</span>
                            <span class="greenBtn" v-if="scope.row.status==2">已提现</span>
                            <span class="redBtn" v-if="scope.row.status==3">已驳回</span>
                        </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                    width="180"
                  prop="create_time"
                  show-overflow-tooltip
                  label="申请时间">
                </el-table-column>
                <el-table-column
                width="180"
                  prop="examine_time"
                  show-overflow-tooltip
                  label="操作时间">
                </el-table-column>
                <el-table-column
                  label="提现凭证">
                  <template slot-scope="scope">
                    <bigImg v-if="scope.row.voucher" height="40px" :src="scope.row.voucher"></bigImg>
                  </template>
                </el-table-column>
                <el-table-column
                width="100"
                  label="操作">
                  <template slot-scope="scope">
                    <div class="ctrolBtn">
                      <div class="text_btn blueBtn" @click="showMaskFn(scope.row)" v-if="scope.row.status==1">提现</div>
                      <div class="text_btn redBtn" @click="cancelFn(scope.row)" v-if="scope.row.status==1">驳回</div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pageCont">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :page-size="per_page"
                  :current-page="page"
                  @current-change="pageFn"
                  :total="total">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-dialog
        title="处理凭证"
        :visible.sync="showMask"
        width="500px"
        >
        <div class="maskCont">
          <div class="upCont">
            <defUpImg heigth="118px" bgc="#ffa718" @upImgSuccess="getImg"></defUpImg>
            <div class="defCtrl">
              <btn value="确认处理" @click="subFn"></btn>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
    import leftcont from '@/components/leftCont.vue'
    import topcont from '@/components/topCont.vue'
    import btn from '@/components/public/btn.vue'
    import bigImg from '@/components/public/bigImg.vue'
    import {StationWithdrawalExamine,Stationmaster} from "@/http/api";
    import defUpImg from '@/components/public/defUpImg.vue'
  
    export default {
      components: {leftcont,topcont,btn,defUpImg,bigImg},
      data() {
        return {
          redCarStatusArr:[
            {
              value: '',
              label: '全部'
            },
            {
              value: '1',
              label: '待审核'
            },{
              value: '2',
              label: '已提现'
            },{
              value: '3',
              label: '已驳回'
            },
          ],
          tableData: [],
          per_page:5,
          page:1,
          total:0,
          techName:'',
          withdrawal_number:'',
          redCarStatusVal:'',
          voucherImg:'',
          subItem:{},
          showMask:false,
        }
      },
      props: {},
      methods:{
        toTech(item){
          this.$router.push({path:'/techDetail',query:{id:item.technician_id}})
        },
        serchFn(){
          this.page = 1
          this.total = 0
          this.getdata()
        },
        pageFn(index){
          this.page = index
          this.getdata()
        },
        showMaskFn(item){
          this.subItem = item
          this.showMask = true
        },
        getImg(src){
          this.voucherImg = src
        },
        cancelFn(item){
            this.$prompt('请输入驳回理由', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
            }).then(({ value }) => {
              let data = {
                withdrawal_id:item.withdrawal_id,
                remark:value,
                status:3,
                voucher:'',
              }
              const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(255, 255, 255, 0.7)'
              });
              StationWithdrawalExamine(data).then((res)=>{
                if(res.data.code==1){
                  this.$message({
                    message: '驳回成功',
                    type: 'success'
                  });
                  this.getdata()
                }else{
                  this.$message(res.data.msg)
                }
                loading.close()
              }).catch((err)=>{
                loading.close()
              this.$message('服务器请求超时');
            })
            })
        },
        subFn(item){
          if(this.voucherImg==''){
            this.$message('请上传提现凭证')
            return false
          }
          let data = {
                withdrawal_id:this.subItem.withdrawal_id,
                remark:'',
                status:2,
                voucher:this.voucherImg,
              }
              this.showMask = false
              const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(255, 255, 255, 0.7)'
              });
              StationWithdrawalExamine(data).then((res)=>{
                if(res.data.code==1){
                  this.$message({
                    message: '操作成功',
                    type: 'success'
                  });
                  this.getdata()
                }else{
                  this.$message(res.data.msg)
                }
                loading.close()
              }).catch((err)=>{
                loading.close()
              this.$message('服务器请求超时');
            })
        },
        detailFn(item){
          this.$router.push({path:'/userPhone_jobDetail',query:{id:item.withdrawal_id}})
        },
        getdata(){
          var data ={
            per_page: this.per_page,
            page: this.page,
            status:this.redCarStatusVal,
            // nick_name:this.nick_name,
            withdrawal_number:this.withdrawal_number,
          }
          Stationmaster(data).then((res)=>{
            if(res.data.code==1){
              this.tableData = res.data.data.data
              this.total = res.data.data.total
            }else{
              this.$message(res.data.msg)
            }
          }).catch((err)=>{
              this.$message('服务器请求超时');
            })
        },
      },
      mounted(){
      },
      created() {
        this.getdata()
      },
    }
  </script>
  
  <style scoped lang="less">
    .container{
      width: 100%;
      display: flex;
      overflow: hidden;
      .righCont{
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-left: 15px;
        height: 100%;
        width: 10px;
        background-color: #F4F8FF;
        .content{
          padding: 20px;
          box-sizing: border-box;
          width: 100%;
          flex: 1;
          overflow: auto;
          .payTable{
            margin-top: 20px;
            width: 100%;
            background-color: #fff;
            padding: 15px;
            box-sizing: border-box;
            .trendTop{
              font-size: 16px;
              font-weight: bold;
              cursor: pointer;
            }
            .tableCont{
              width: 100%;
              margin-top: 15px;
              .tableSerchCont{
                width: 100%;
                display: flex;
                justify-content: flex-end;
                margin-bottom: 10px;
                .serchItem{
                  width: 150px;
                  margin-left: 10px;
                }
                .headBtn{
                    margin-left: 10px;
                }
              }
              .ctrolBtn{
                display: flex;
                // justify-content: center;
                .text_btn{
                  margin: 0 5px;
                  cursor: pointer;
                  font-size: 14px;
                }
                .redBtn{
                  color: #F56C6C;
                }
                .blueBtn{
                  color: #96A1FE;
                }
                .greenBtn{
                  color: #85CE61;
                }
                .textLine{
                  cursor: pointer;
                  text-decoration: underline;
                }
              }
              .flexStart{
                justify-content: flex-start;
              }
              .pageCont{
                padding: 30px 0;
                display: flex;
                justify-content: center;
              }
            }
          }
        }
      }
    }
  </style>
  